<!--
// 
// GRichText.vue
// 客户后台
// 
// Created by 区区电脑 on 2024/09/07.
// 
-->
<template>
    <div ref="gRichText" class="GRichText" v-html="value"></div>
</template>

<script setup>
import {ref, reactive, computed, watch, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import Viewer from "viewerjs";

const {$waitingIsOk} = window

const props = defineProps({
    value: {
        type: String,
        default: () => ""
    }
});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();
const app = {
    viewer: null
}


const gRichText = ref(null)

function configViewer() {
    $waitingIsOk(() => {
        return gRichText.value && gRichText.value instanceof Element
    }, () => {
        setTimeout(() => {
            if (gRichText.value) {
                app.viewer = new Viewer(gRichText.value, {})
            }
        }, 300)
    }, 10)
}

watch(() => props.value, () => {
    configViewer()
})

onMounted(() => {
    configViewer()
})
</script>

<style lang="scss" scoped>
.GRichText {
    width: 100%;
}
</style>
<style lang="scss">
.GRichText {
    width: 100%;
    box-sizing: border-box;

    img {
        max-width: 100%;
        cursor: zoom-in;
    }
}
</style>